<template>
<el-drawer :title="formDrawer.title" :visible.sync="formDrawer.visible" direction="rtl" custom-class="drawer-right-side" :before-close="closeDrawer" size="40%" append-to-body>
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-position="top" label-width="100px" class="ruleForm">
        <el-form-item label="承办公司" prop="company_id" required>
            <picker-view type="company" v-model="ruleForm.company_id" @change="changeCompany"></picker-view>
        </el-form-item>

        <el-form-item v-if="isWedding" label="婚庆套餐" prop="product_id" required :rules="[{required: true,message:'请选择婚庆套餐'}]">
            <el-select v-model="ruleForm.product_id" placeholder="请选择婚庆套餐">
                <el-option v-for="item in productList" :key="item.id" :label="item.title" :value="item.id"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item v-if="!isWedding" label="餐标" prop="price" required>
            <el-input type="number" v-model="ruleForm.price" placeholder="餐标" @input="setTotal"></el-input>
        </el-form-item>

        <el-form-item v-if="!isWedding" label="" prop="amount" required>
            <el-input type="number" v-model="ruleForm.amount" placeholder="" @input="setTotal"></el-input>
        </el-form-item>

        <el-form-item label="户外场地费" prop="place">
            <el-input type="number" v-model="ruleForm.place" placeholder="户外场地费" @input="setTotal"></el-input>
        </el-form-item>

        <el-form-item label="其他费用" prop="other">
            <el-input type="number" v-model="ruleForm.other" placeholder="其他费用" @input="setTotal"></el-input>
        </el-form-item>

        <el-form-item label="优惠金额" prop="discount">
            <el-input type="number" v-model="ruleForm.discount" placeholder="优惠金额" @input="setTotal"></el-input>
        </el-form-item>

        <el-form-item label="金额小计" prop="total" required>
            <el-input type="number" v-model="ruleForm.total" placeholder="金额小计" readonly></el-input>
        </el-form-item>

        <div class="fixed-bottom" style="width:40vw">
            <el-button type="primary" size="small" @click="submit">提交并保存</el-button>
        </div>
    </el-form>
</el-drawer>
</template>

<script>
import pickerView from "@/components/picker/select.vue";
import {
    productForm,
} from '@/views/order/components/config/create-order.js'
import dictionary from '@/utils/dictionary.js';
import {
    getProduceListApi
} from '@/api/product/produce.js';
import {
    getBanquetListApi
} from '@/api/system/dictionary/banquet';
import {
    updateServiceApi
} from '@/api/order/service.js'

export default {
    components: {
        pickerView,
    },
    data() {
        return {
            formDrawer: {
                title: "编辑服务详情",
                visible: false,
            },
            banquetList: [],
            productList: [],
            order: {},
            ruleForm: Object.assign({}, productForm),
            rules: {
                company_id: [{
                    required: true,
                    message: '请选择承办公司'
                }]
            }
        }
    },
    computed: {
        isBanquet() {
            if (this.ruleForm.category.order_model == 'Banquet') {
                return true;
            } else {
                return false;
            }
        },
        isWedding() {
            if (this.ruleForm.category.order_model == 'Wedding') {
                return true;
            } else {
                return false;
            }
        }
    },
    methods: {
        showDrawer(row, order) {
            this.formDrawer.title = '编辑' + order.category.title + '信息';
            this.formDrawer.visible = true;
            // this.ruleForm = JSON.parse(JSON.stringify(row));
            this.ruleForm = row;
            this.order = order;

            if (row.category.order_model == 'Banquet') {
                this.getBanquetList();
            }

            if (row.category.order_model == 'Wedding') {
                this.getProductList();
            }
        },
        closeDrawer() {
            this.formDrawer.visible = false;
        },
        setTotal() {
            let price = parseFloat(this.ruleForm.price || 0);
            let amount = parseFloat(this.ruleForm.amount || 0);
            let place = parseFloat(this.ruleForm.place || 0);
            let other = parseFloat(this.ruleForm.other || 0);
            let discount = parseFloat(this.ruleForm.discount || 0);
            this.ruleForm.total = (price * amount + place + other - discount).toFixed(2);
        },
        changeCompany() {
            if (this.isBanquet) {
                this.getBanquetList();
            }

            if (this.isWedding) {
                this.ruleForm.product_id = '';
                this.getProductList();
            }
        },
        getProductList() {
            // this.ruleForm.product_id = '';
            let params = {
                company_id: this.ruleForm.company_id,
                category_id: this.ruleForm.category_id
            };
            getProduceListApi(params).then(res => {
                this.productList = res.data.list;
            });
        },
        getBanquetList() {
            let params = {
                store_id: this.order.store_id
            }
            getBanquetListApi(params).then(res => {
                this.banquetList = res.data.list;
            })
        },
        submit() {
            this.$refs['ruleForm'].validate(valid => {
                if (!valid) {
                    return false;
                }
                updateServiceApi(this.ruleForm).then(res => {
                    if (res.code == 200) {
                        this.$message.success(res.msg);
                        this.closeDrawer();
                    } else {
                        this.$message.warning(res.msg)
                    }
                })
            })
        }
    }
}
</script>

<style>

</style>
